<template>
  <a-descriptions title="">
    <a-descriptions-item label="会员ID">{{ details.id }}</a-descriptions-item>
    <a-descriptions-item label="会员状态"> 
      {{statusDesc }} 
    </a-descriptions-item>
    <a-descriptions-item label="手机号">{{ details.mobile }}</a-descriptions-item>
    <a-descriptions-item label="会员积分余额">{{ details.balance }}</a-descriptions-item>
    <a-descriptions-item label="审核中积分">{{ details.reviewAmount }}</a-descriptions-item>
    <a-descriptions-item label="已兑换积分">{{ details.expendedAmount }}</a-descriptions-item>
    <a-descriptions-item label="参与项目数量">{{ details.completes + details.rejects }}</a-descriptions-item>
    <a-descriptions-item label="完成项目数量">{{ details.completes }}</a-descriptions-item>
    <a-descriptions-item label="QC数量">{{ details.qc }}</a-descriptions-item>
    <a-descriptions-item label="注册时间">{{proxy.$filters.formatTime(details.createTime)}}</a-descriptions-item>
    <a-descriptions-item label="最后活跃时间">{{ proxy.$filters.formatTime(details.lastActiveTime) }}</a-descriptions-item>
    <a-descriptions-item label="认证通过时间">{{ proxy.$filters.formatTime(details.qualifyTime) }}</a-descriptions-item>
    <a-descriptions-item label="推荐人">{{ details.sharerName }}</a-descriptions-item>
  </a-descriptions>
  <a-descriptions title="认证资料" v-if="reviews.realname">
    <a-descriptions-item label="姓名">{{ reviews.realname }}</a-descriptions-item>
    <a-descriptions-item label="地区">{{ reviews.province }} {{ reviews.city }}</a-descriptions-item>
    <a-descriptions-item label="科室">{{ reviews.departmentName }}</a-descriptions-item>
    <a-descriptions-item label="职称">{{ reviews.titleName }}</a-descriptions-item>
    <a-descriptions-item label="行政职称">{{ reviews.levelName }}</a-descriptions-item>
    <a-descriptions-item label="医院">{{ reviews.hospitalName }} <a class="btn" type="link" @click="openHospital">修改</a></a-descriptions-item>
    <a-descriptions-item label="认证资料图片">
      <a-image :width="200" v-if="reviews.img" :src="reviews.img"/>
    </a-descriptions-item>
  </a-descriptions>
  <a-form :label-col="{span: 1}" v-if="status===2">
    <a-form-item label="性别">
      <a-select v-model:value="formState.gender" style="width: 180px;">
        <a-select-option value="男">男</a-select-option>
        <a-select-option value="女">女</a-select-option>
        <a-select-option value="未知">未知</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item :wrapper-col="{offset: 1,span: 17}">
      <a-button type="primary" @click="onSubmit(1)">审核通过</a-button>
      <a-button style="margin-left: 10px" @click="openStatus">审核拒绝</a-button>
      <a-popconfirm
          :title="`确认${status !== -1 ? '拉黑':'恢复'}?`"
          @confirm="onDelete"
        >
        <a-button type="primary" danger style="margin-left: 10px">{{status !== -1 ? '拉黑':'恢复'}}</a-button>
      </a-popconfirm>
    </a-form-item>
  </a-form>
  <a-popconfirm
    :title="`确认${status !== -1 ? '拉黑':'恢复'}?`"
    @confirm="onDelete"
    v-else
  >
    <a-button type="primary" danger style="margin-left: 10px">{{status !== -1 ? '拉黑':'恢复'}}</a-button>
  </a-popconfirm>
  <BasicModal @register="register">
    <a-form-item label="">
      <a-textarea :rows="4" v-model:value="formState.reason" placeholder="请输入审核拒绝原因" />
    </a-form-item>
    <template #footer>
      <a-button type="primary" @click="onSubmit(-1)">拒绝</a-button>
      <a-button @click="() => {openStatus(false)}">取消</a-button>
    </template>
  </BasicModal>
  <BasicModal @register="register1">
    <a-form :model="hospital" :label-col="{span: 4}" :wrapper-col="{span: 18}">
      <a-form-item label="省份">
        <a-select v-model:value="hospital.province" style="width: 100%;">
          <a-select-option :value="option.name" v-for="option in provinceList" :key="option.name">{{ option.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="城市">
        <a-select v-model:value="hospital.city" style="width: 100%;">
          <a-select-option :value="option.name" v-for="option in cityList" :key="option.name">{{ option.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <template v-if="!isAdd">
        <a-form-item label="医院名称">
          <a-select
            v-model:value="hospital.hospitalId"
            show-search
            placeholder="请搜索选择医院名称"
            style="width: 100%"
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            :not-found-content="fetching ? undefined : null"
            @search="handleSearch"
            @change="handleChange"
            :options="hospitals"
          >
          <template v-if="fetching" #notFoundContent>
            <a-spin size="small" />
          </template>
        </a-select>
        </a-form-item>
        <a-form-item label="医院级别">
          {{ hospital.level }}
        </a-form-item>
        <a-form-item label="医院性质">
          {{ hospital.operationMode }}
        </a-form-item>
        <a-form-item label="地址">
         {{ hospital.address }}
        </a-form-item>
      </template>
      <template v-else>
        <a-form-item label="医院名称">
          <a-input v-model:value="hospital.name" placeholder="请输入医院名称" />
        </a-form-item>
        <a-form-item label="医院级别">
          <a-select v-model:value="hospital.level" style="width: 100%;">
            <a-select-option :value="option.name" v-for="option in levelList" :key="option.name">{{ option.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="医院性质">
          <a-select v-model:value="hospital.operationMode" style="width: 100%;">
            <a-select-option :value="option.name" v-for="option in typeList" :key="option.name">{{ option.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="地址">
          <a-input v-model:value="hospital.address" placeholder="请输入医院地址" />
        </a-form-item>
      </template>
    </a-form>
    <template #footer v-if="!isAdd">
      <a-button type="primary" @click="onSaveHospitalId">确定</a-button>
      <a-button @click="isAdd = true">添加新医院</a-button>
    </template>
    <template #footer v-else>
      <a-button type="primary" @click="onAddHospital">添加</a-button>
      <a-button @click="isAdd = false">返回搜索医院</a-button>
    </template>
  </BasicModal>
</template>
<script setup>
let lastFetchId = 0;
import { useRoute, useRouter } from 'vue-router'
import { message, Modal } from 'ant-design-vue';
import { onMounted, reactive, ref, computed } from 'vue';
import BasicModal from '@/components/Modal/BasicModal.vue';
import { useModal } from "@/components/Modal/useModal";
import { profile } from '@/api/survey';
import { getDetails, reviewDetails, review, setMemberStatus } from '@/api/user.js'
import { hospitalList, hospitalEdit } from '@/api/common.js'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
const details = ref({});
const reviews = ref({});
const formState = reactive({
  gender: undefined,
  reason: undefined
})
const [register, { actionDialog: openStatus }] = useModal({
  title: "审核拒绝"
});
const [register1, { actionDialog: openHospital }] = useModal({
  title: "请完善医院信息"
});
const statusList = ref([
  { label: '待审核', value: 2 },
  { label: '已认证', value: 1 },
  { label: '未认证', value: 0 },
  { label: '已拉黑', value: -1 },
  { label: '审核拒绝', value: -2 }
])
const status = ref()
const statusDesc = ref()
const hospital = reactive({
  province: undefined,
  city: undefined,
  name: undefined,
  hospitalId: undefined,
  operationMode: '',
  level: '',
  address: ''
})
const fetching = ref(false)
const isAdd = ref(false)
const provinceList = ref([])
const cityList = computed(() => {
  if (!hospital.province) return []
  hospital.city = undefined
  return provinceList.value.find(i => i.name === hospital.province).list
})
const typeList = ref([])
const levelList = ref([])
const hospitals = ref([])
onMounted(() => {
  getDetails({memberId: route.query.id}).then(res => {
    details.value = res.data
    statusDesc.value = statusList.value.find(i => i.value === res.data.status).label
    status.value = res.data.status
  })
  reviewDetails({ memberId: route.query.id }).then(res => {
    reviews.value = res.data || {}
  })
  profile().then(res => {
    res.data.forEach(item => {
      if (item.id === 3818) typeList.value = item.list
      if (item.id === 3804) levelList.value = item.list
      if (item.id === 158) provinceList.value = item.list
    })
  })
})
const handleSearch = (val) => {
  lastFetchId += 1;
  const fetchId = lastFetchId;
  hospitals.value = [];
  fetching.value = true;
  const req = {
    name: val,
    province: hospital.province,
    city: hospital.city
  }
  hospitalList(req).then(res => {
    if (fetchId !== lastFetchId) {
      return;
    }
    lastFetchId = fetchId
    fetching.value = false
    hospitals.value = res.data.list.map(i => ({ label: i.name, value: i.id,...i }))
  })
}
const handleChange = (val) => {
  if (!val) return
  const dist = hospitals.value.find(i => i.id === val)
  if (dist) {
    hospital.operationMode = dist.operationMode
    hospital.level = dist.level
    hospital.address = dist.address
  }
}
const onSaveHospitalId = () => {
  if (!hospital.hospitalId) {
    message.error('请选择医院')
    return
  }
  reviews.value.hospitalId = hospital.hospitalId
  reviews.value.hospitalName = hospitals.value.find(i => i.id === hospital.hospitalId).name
  openHospital(false)
}
const onAddHospital = () => {
  if (!hospital.name) {
    message.error('请输入医院名称')
    return
  }
  if (!hospital.province) {
    message.error('请选择省份')
    return
  }
  if (!hospital.city) {
    message.error('请选择城市')
    return
  }
  if (!hospital.level) {
    message.error('请选择医院等级')
    return
  }
  if (!hospital.operationMode) {
    message.error('请选择医院性质')
    return
  }
  Modal.confirm({
    title: '确定要添加医院?',
    async onOk() {
      const req = {
        name: hospital.name,
        province: hospital.province,
        city: hospital.city,
        level: hospital.level,
        operationMode: hospital.operationMode,
        address: hospital.address
      }
      const res = await hospitalEdit(req)
      message.success('添加成功')
      reviews.value.hospitalId = res.data
      reviews.value.hospitalName = hospital.name
      openHospital(false)
    },
  });
}
const onSubmit = (status) => {
  if (status === 1 && !formState.gender) {
    message.error('请选择性别')
    return
  }
  if (status === 1 && !reviews.value.hospitalId) {
    message.error('请先完善医院信息')
    return
  }
  if (status === -1 && !formState.reason) {
    message.error('请输入拒绝原因')
    return
  }
  review({
    ...formState,
    status,
    id: reviews.value.id,
    hospitalId: reviews.value.hospitalId,
    hospitalName: reviews.value.hospitalName
  }).then(() => {
    message.success('提交成功')
    router.go(-1)
  })
}
const onDelete = () => {
  setMemberStatus(route.query.id, status.value === -1 ? 1 : -1).then(() => {
    message.success('提交成功')
    router.go(-1)
  })
}
</script>